<template>
  <view class="tp-step-simple-card">
    <view class="title" :class="{active: active}" v-if="title">{{title}}</view>
    <view class="lines" v-if="lines && lines.length > 0">
      <view class="line" v-for="(line, idx) in lines" :key="'line-' + idx">{{line}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"tp-step-simple-card",
    props: {
      active: {
        type: Boolean,
        default: false
      },
      title: String,
      lines: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  
  .tp-step-simple-card {
    display: flex;
    flex-direction: column;
    
    .title {
      height: 24px;
      line-height: 24px;
      font-size: $font-size-md;
      font-weight: $font-weight-bold;
      &.active {
        color: var(--brand-2)
      }
    }
    
    .lines {
      display: flex;
      flex-direction: column;
      .line {
        color: var(--gray-2);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
      }
    }
  }

</style>